<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-08 20:44:36
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-09 07:09:42
-->
<template>
    <!-- 标题 -->
    <h1 :style="titleInfo.color" @click="$store.commit('add')">{{ titleInfo.value }}</h1>
    <div>{{ counter }}</div>
    <div>{{ doubleCounter }}</div>
    <!-- 待办列表 -->
    <h3 v-for="item in todos" :key="item.id">{{ item.title }}</h3>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
// 将类型分离出来导入
import type { PropType } from "vue";
import type { TitleInfo, Todo } from "../types"
import { useStore } from "vuex"
import { key } from "../store";
const store = useStore(key)

// 属性声明
defineProps({
    titleInfo: {
        type: Object as PropType<TitleInfo>,
        required: true
    }
})
// 数量
const counter = computed(() => store.state.counter);
const doubleCounter = computed(() => counter.value * 2)

// 待办事项
// const items = ref([] as Todo[])
const todos = computed(() => store.state.todos?.todos)
// TODO 的初始化
// store.dispatch('todos/initTodo');
// items.value.push({
//     id: 1,
//     name: "vue3+ts",
//     complated: false
// });

</script>

<style>
</style>


